<template>
  <div>
    <div class="topBar">
      <van-nav-bar
        v-if="$route.query.type == 'technic'"
        :border="false"
        title="面试技巧搜索"
      >
        <template #left>
          <i @click="$router.back()" class="iconfont icon-zuojiantou"></i>
        </template>
      </van-nav-bar>
      <van-nav-bar v-else :border="false" title="面经搜索">
        <template #left>
          <i @click="$router.back()" class="iconfont icon-zuojiantou"></i>
        </template>
      </van-nav-bar>
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
          @cancel="onCancel"
        />
      </form>
    </div>
    <div v-if="!value" class="search">
      <h4>大家都在搜索</h4>
      <span
        @click="search(item)"
        class="hot"
        v-for="(item, index) in hotSearchList"
        :key="index"
        >{{ item }}</span
      >
      <div class="history">
        <span class="record">历史记录</span>
        <span @click="close">清空</span>
      </div>
      <div v-if="$route.query.type == 'technic'">
        <span
          @click="search(item)"
          v-for="item in historyTechnic"
          :key="item"
          class="hot"
          >{{ item }}</span
        >
      </div>
      <div v-else>
        <span
          @click="search(item)"
          v-for="item in historyShareList"
          :key="item"
          class="hot"
          >{{ item }}</span
        >
      </div>
    </div>
    <article-item
      @click.native="$router.push('/technicDetail/' + item.id)"
      v-for="item in searchList"
      :key="item.id"
      :item="item"
      v-else
    />
    <share-list
      @click.native="$router.push('/shareDetail/' + item.id)"
      v-for="item in shareList"
      :key="item.id"
      :obj="item"
    />
  </div>
</template>

<script>
import ShareList from '@/components/Find/ShareList.vue'
import ArticleItem from '@/components/Find/ArticleItem.vue'
import { hotSearchList, skiisList, hotShareList, shareList } from '@/api/InterviewSkills'
export default {
  components: {
    ArticleItem,
    ShareList
  },
  data () {
    return {
      value: '',
      hotSearchList: [],
      technic: [],
      historyTechnic: JSON.parse(localStorage.getItem('technic')),
      searchList: [],
      share: [],
      shareList: [],
      historyShareList: JSON.parse(localStorage.getItem('share')),
    }
  },
  methods: {
    close () {
      localStorage.setItem('technic', JSON.stringify([]))
      this.historyTechnic = JSON.parse(localStorage.getItem('technic'))
    },
    async search (item) {
      if (this.$route.query.type == 'technic') {
        this.value = item
        this.technic.push(item)
        this.technic = [...new Set(this.technic)]
        localStorage.setItem('technic', JSON.stringify(this.technic))
        const res = await skiisList({
          start: 0,
          limit: 9999999,
          q: this.value
        })
        this.searchList = res.data.list
        // console.log(this.searchList);
        this.searchList.forEach(v => {
          const num = (v.title.indexOf(this.value));
          // console.log(num);
          const t = v.title.substring(num, num + this.value.length)
          v.title = v.title.substring(0, num) + `<span style="color:red">${t}</span>` + v.title.slice(num + this.value.length, 9999)
        });
        // console.log(this.searchList);
      } else {
        this.value = item
        this.share.push(item)
        this.share = [...new Set(this.share)]
        localStorage.setItem('share', JSON.stringify(this.share))
        const res = await shareList({
          start: 0,
          limit: 9999999,
          q: this.value
        })
        // console.log(res);
        this.shareList = res.data.list
        this.shareList.forEach(v => {
          const num = (v.title.indexOf(this.value));
          // console.log(num);
          const t = v.title.substring(num, num + this.value.length)
          v.title = v.title.substring(0, num) + `<span style="color:red">${t}</span>` + v.title.slice(num + this.value.length, 9999)
        });
      }
    },
    onSearch () {
    },
    onCancel () {
      this.historyTechnic = JSON.parse(localStorage.getItem('technic'))
    },
  },
  async created () {
    if (this.$route.query.type == 'technic') {

      const res = await hotSearchList()
      this.hotSearchList = res.data
    } else {
      const res2 = await hotShareList()
      this.hotSearchList = res2.data
    }
    if (localStorage.getItem('share')) {
      this.historyShareList = JSON.parse(localStorage.getItem('share'))
    }
    if (localStorage.getItem('technic')) {
      this.historyShareList = JSON.parse(localStorage.getItem('technic'))
    }
  },
}
</script>

<style lang="less" scoped>
.topBar {
  border-bottom: 1px solid #f8f8f9;
  padding-bottom: 0.9375rem;
  .icon-zuojiantou {
    font-size: 1.5625rem;
  }
}
.search {
  margin: 0 0.625rem;
  h4 {
    font-size: 1.125rem;
  }
  .hot {
    border-radius: 0.3125rem;
    color: #545671;
    font-size: 0.75rem;
    margin-right: 0.625rem;
    padding: 0.3125rem;
    background-color: #eceaea;
  }
  .history {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    .record {
      font-size: 1.25rem;
      font-weight: 500;
    }
    span {
      font-size: 12px;
    }
  }
}
</style>
